<template>
  <div>
    <el-table :data="list" border style="width: 100%" >
      <el-table-column
            prop="indexName"
            label="指标名称" :render-header="renderHeader"> 
          </el-table-column>
      <el-table-column v-for="(column,index) in columns" :key="index" :prop="column.prop" :label="column.lable"
        :width="column.width || ''">

        <template slot-scope="{ row }">
          <span v-if="column.prop === 'indexType'">
            {{ setindexType(row[column.prop]) }}
          </span>

          <span v-else>
            {{ formatter(row, column.prop) || "--" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" :width="50" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => {
          return []
        }
      },
      classifyKey: {
        type: String,
        default: ''
      }
    },
    watch: {
      list(newval) {
        console.log('en', newval)
        this.$forceUpdate()
      }
    },
    computed: {
      setLabel() {
        return function(label) {
          if (label === '指标名称') {
            return `指标名称(${this.list.length})`
          } else {
            return label
          }
        }
      }
    },
    data() {
      return {
        num: 0,
        // {
        //   lable: `指标名称`,
        //   show: true,
        //   prop: 'indexName',
        //   width: 200
        // },
        
        columns: [
         
          {
            lable: '分类',
            show: true,
            width: 80,
            prop: 'indexType'
          },
          {
            lable: '岗位',
            show: true,
            prop: 'hontPostName',
            width: 80
          },
          {
            lable: '考核标准',
            show: true,
            prop: 'indexDescribe'
          },
          {
            lable: '分数',
            show: true,
            width: 50,
            prop: 'indexScore'
          }
        ]
      }
    },
    computed: {
      setindexType() {
        return function(state) {
          if (state === 0) {
            return '加分项'
          } else if (state === 1) {
            return '减分项'
          } else if (state === 2) {
            return '加减分项'
          } else if (state === 3) {
            return '自定义加分项'
          } else if (state === 4) {
            return '自定义减分项'
          }
        }
      }
    },
    methods: {
      renderHeader(h, {
        column,
        $index
      }) {
        let currentLabel =`${column.label}(${this.list.length})`;
        return h('span', {}, [
          
          h('span', {}, currentLabel)
        ])
      },
      formatter(row, prop) {
        const value = row[prop]
        return value
      },
      handleDelete({
        row,
        $index
      }) {
        const {
          classifyKey
        } = this
        this.$emit('deleteitem', {
          index: $index,
          key: classifyKey
        })
      }
    }
  }
</script>
